<template>
  <div class="padding-tb">
    <el-card class="margin-bottom">
      <div slot="header">
        <el-row>
          <el-col :span="18">
            <span class="title-icon" style="font-size:15px;"
              >阿米巴费用结算中心</span
            >
            <span style="margin-left:100px;">总计</span>
            <span style="margin-left:40px;"
              >应收总计：{{ receiveTotalCost }} RMB</span
            >
            <span style="margin-left:40px;"
              >应付总计：{{ payTotalCost }} RMB</span
            >
            <span style="margin-left:40px;"
              >利润：{{ amoebaTotalProfit }} RMB</span
            >
            <span style="margin-left:40px;">利润率：{{ profit }} </span>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-button
              v-if="
                verifyShow.createAmoeba &&
                  !verifyShow.shippingOperte &&
                  !verifyShow.saler
              "
              type="success"
              size="mini"
              @click="createAmoeba"
            >
              新增
            </el-button>

            <el-button
              type="primary"
              size="mini"
              @click="lazyloadWaybillReceivePayables"
            >
              重新加载
            </el-button>
          </el-col>
        </el-row>
        <div v-loading.fullscreen.lock="fullscreenLoading"></div>
      </div>
      <div v-for="(item, k) in amoebaDataMap" :key="k">
        <el-collapse v-model="activeNames" class="margin-bottom">
          <el-collapse-item class="margin-bottom" :name="k">
            <template slot="title">
              <div slot="header" class="clearfix relative">
                <span style="title-icon">{{ k }}</span>
                <span style="margin-left:40px;"
                  >应收总计：{{ item["amoebaTotalReceiveMoney"] }} RMB</span
                >
                <span style="margin-left:40px;"
                  >应付总计：{{ item["amoebaTotalPayMoney"] }} RMB</span
                >
                <span style="margin-left:40px;"
                  >利润：{{ item["amoebaTotalProfit"] }} RMB</span
                >
                <span style="margin-left:40px;"
                  >利润率：{{ item["totalProfitD"] }}
                </span>
                <!-- 海运操作 才显示 -->
                <div v-if="k == '海运操作'" style="margin-top:-25px;">
                  <div>
                    <span
                      >渠道：{{
                        initOptionsData.channelMap[
                          Constatvariable["inStockChannel"]
                        ]
                      }}</span
                    >
                    <span style="margin-left:40px;"
                      >仓库代码：{{
                        Constatvariable["dispatchAddressCode"]
                      }}</span
                    >
                    <span style="margin-left:40px;"
                      >入库件数：{{
                        Constatvariable["inStockTotalPackages"]
                      }}</span
                    >
                    <span style="margin-left:40px;"
                      >入库计费重：{{
                        Constatvariable["inStockChargedWeight"]
                      }}</span
                    >
                    <span style="margin-left:40px;"
                      >实重(KG)：{{
                        Constatvariable["inStockActualWeight"]
                      }}</span
                    >
                    <span style="margin-left:40px;"
                      >入库体积：{{ Constatvariable["inStockVolume"] }}</span
                    >
                    <span style="margin-left:40px;"
                      >国家：{{
                        initOptionsData.countryMap[Constatvariable["countryId"]]
                      }}</span
                    >
                  </div>
                </div>
              </div>
            </template>
            <el-card class="margin-bottom">
              <div slot="header" class="clearfix relative">
                <el-row>
                  <el-col :span="12">
                    <span class="title-icon">应收</span>
                  </el-col>
                  <el-col :span="12" class="text-right">
                    <el-button
                      v-if="k == '海运操作'"
                      type="success"
                      size="mini"
                    >
                      {{
                        Constatvariable["amoebaLoadPortStatu"] == 1
                          ? "取消"
                          : "生成"
                      }}
                      阿米巴目的港账单
                    </el-button>
                    <el-button
                      v-if="k == '海运操作'"
                      type="success"
                      size="mini"
                      @click="updateAmoebaLoadPortStatu"
                    >
                      {{
                        Constatvariable["amoebaLoadPortStatu"] == 1
                          ? "取消"
                          : "生成"
                      }}
                      阿米巴起运港账单
                    </el-button>
                    <el-button
                      v-if="
                        item['amoebaReceives'] &&
                          item['amoebaReceives'].length > 0 &&
                          verifyShow.editAmoeba
                      "
                      type="text"
                      size="mini"
                      @click="batchToReceivable(item['amoebaReceives'])"
                    >
                      批量推送
                    </el-button>

                    <el-button
                      v-if="verifyShow.createAmoeba"
                      type="text"
                      size="mini"
                      @click="addRow(k, 0)"
                      >新增</el-button
                    >
                  </el-col>
                </el-row>
              </div>
              <HotTable
                ref="hotTable"
                :verifyShow="verifyShow"
                :templateName="`Amoeba`"
                :Constatvariable="Constatvariable"
                :templateData.sync="item['amoebaReceives']"
                :oldData="item.oldData"
                :department="k"
                :templateOptUser="optUser"
                :receveToPay.sync="payableData"
                :templateOptions="templateOptions"
                :templateType="`receivable`"
                :templateDelReceveIds="delReceveIds"
                @getInfo="lazyloadWaybillReceivePayables"
                @updateToReceive="updateReceive"
                class="margin-top text-sm"
              ></HotTable>
            </el-card>

            <el-card style="margin-top:-10;">
              <div slot="header" class="clearfix relative">
                <span class="title-icon">应付</span>
              </div>
              <HotTable
                ref="hotTable"
                :verifyShow="verifyShow"
                :templateName="`Amoeba`"
                :department="k"
                :templateData.sync="item['amoebaPays']"
                :templateOptUser="optUser"
                :payToReceve.sync="receivableData"
                :templateOptions="templateOptions"
                :templateType="`payable`"
                :templateDelPayIds="delPayIds"
                @getInfo="lazyloadWaybillReceivePayables"
                @updateToReceive="updateReceive"
                class="margin-top text-sm"
              ></HotTable>
            </el-card>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
    <el-dialog :visible.sync="centerDialogVisible" title="新增阿米巴">
      <el-form
        ref="amoebaParams"
        :model="amoebaData"
        :rules="rules"
        size="mini"
        label-width="85px"
        label-position="right"
      >
        <el-row :gutter="0">
          <el-col :span="11">
            <el-form-item label="运单号" prop="waybillNo">
              <el-input
                v-model="amoebaData.waybillNo"
                placeholder="请输入运单号"
                disabled
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="数量" prop="count">
              <el-input
                v-model="amoebaData.count"
                placeholder="请输入数量"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="11">
            <el-form-item label="原币单价" prop="currencyUnitPrice">
              <el-input
                v-model="amoebaData.currencyUnitPrice"
                placeholder="非RMB,需要系统自动换算汇率请填写原币单价"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="币种" prop="currency">
              <el-select
                v-model="amoebaData.currency"
                placeholder="请输入币种"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in currencyOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="11">
            <el-form-item label="费用名称" prop="costId">
              <el-select
                v-model="amoebaData.costId"
                placeholder="请输入费用名称"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in payNameOptions"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="阿米巴科目" prop="amoebaSubjectId">
              <el-select
                v-model="amoebaData.amoebaSubjectId"
                placeholder="请选择阿米巴科目"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in amoebaSubjectIdOptions"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="11">
            <el-form-item label="结算人" prop="settleManId">
              <el-select
                v-model="amoebaData.settleManId"
                placeholder="请选择结算人"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in userOptions"
                  :key="index"
                  :label="item"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="应收部门" prop="receiveDepartId">
              <el-select
                v-model="amoebaData.receiveDepartId"
                placeholder="请选择应收部门"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in receiveDepartIdOptions"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="11">
            <el-form-item label="费用日期" prop="costDate">
              <el-date-picker
                v-model="amoebaData.costDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择费用日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="amoebaData.remark"
                placeholder="请输入备注"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="saveOrUpdateAmoebaSettlementCenter"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils";
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { clone } from "@/utils/clone";
import HotTable from "./HotTableAmoeba";
import { m } from "@/store/yg/common/local";

export default {
  components: {
    HotTable
  },
  props: {
    initOptionsData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    verifyShow: {
      type: Object,
      default: function() {
        return {};
      }
    },
    Constatvariable: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      amoebaIds: 0,
      templateOptions: {
        //C类
        paycOptions: ["C0", "C1", "C2", "C3"],
        //账单类型
        yesOptions: ["是", "否"],
        //币种
        currencyOptions: [],
        //费用名称：
        configPayNameOptions: [],
        //费用类型
        amoebaSubjectOptions: [],
        //用户信息
        userOptions: [],
        //费用名称对应的阿米巴科目
        payNameToSubject: {},
        groups: []
      },
      waybillData: {},
      //当前用户
      optUser: "",
      //记录应收删除的ID
      delReceveIds: [],
      //记录应付删除的ID
      delPayIds: [],
      //应收
      receiveTotalCost: 0,
      //应付
      payTotalCost: 0,
      amoebaTotalProfit: 0,
      //利润率
      profit: "0%",
      //应付信息
      payMap: {},
      //应收信息
      receiveMap: {},
      activeNames: [],
      standardCurrency: "RMB",
      restaurants: [],
      selectionList: [],
      selectionPayableList: [],
      amoebaDataMap: {},

      receivableData: [],
      payableData: [],

      //弹窗
      centerDialogVisible: false,
      amoebaData: {
        waybillNo: undefined,
        count: undefined,
        currencyUnitPrice: undefined,
        currency: undefined,
        costId: undefined,
        amoebaSubjectId: undefined,
        settleManId: undefined,
        receiveDepartId: undefined,
        costDate: null,
        remark: undefined
      },
      rules: {
        count: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur"
          }
        ],
        currencyUnitPrice: [
          {
            required: true,
            message: "请输入原币单价",
            trigger: "blur"
          }
        ],

        costId: [
          {
            required: true,
            message: "请输入费用名称",
            trigger: "change"
          }
        ],
        amoebaSubjectId: [
          {
            required: false,
            message: "请选择阿米巴科目",
            trigger: "change"
          }
        ],

        receiveDepartId: [
          {
            required: false,
            message: "请选择应收部门",
            trigger: "change"
          }
        ]
      },
      amoebaSubjectIdOptions: {},
      settleManIdOptions: {},
      receiveDepartIdOptions: {},
      userOptions: {},
      currencyOptions: {},
      payNameOptions: {}
    };
  },

  methods: {
    updateReceive() {
      this.$emit("updateToReceive");
    },
    // 新增
    addRow(key, type) {
      // amoebaPays
      // amoebaReceives
      this.amoebaIds++;
      console.log("amoebaIds: ", this.amoebaIds);
      const data = {
        settleManId: this.templateOptions.userMap[
          this.Constatvariable.salesmanId
        ],
        costId: "",
        onlyKey: this.amoebaIds,
        amoebaSubjectId: "",
        unitPrice: "",
        money: "",
        currencyUnitPrice: "",
        cuser: this.optUser,
        count: "",
        currency: "",
        currencyTotalCost: "",
        costDate: "",
        updator: "",
        cdate: parseTime(new Date().toLocaleDateString(), "{y}-{m}-{d}"),
        isCarryOver: "",
        amoebaSubjectId: "",
        accountDate: parseTime(new Date().toLocaleDateString(), "{y}-{m}-{d}"),
        remark: ""
      };

      if (type) {
        // amoebaPays amoebaReceives
        data.payDepartId = "";
        // 应付
        if (this.amoebaDataMap[key].amoebaPays) {
          const arr = clone(this.amoebaDataMap[key].amoebaPays);
          data.receiveDepartId = "";
          arr.push(data);

          this.$set(this.amoebaDataMap[key], "amoebaPays", arr);
        } else {
          this.$set(this.amoebaDataMap[key], "amoebaPays", [data]);
        }
      } else {
        // 应收
        data.receiveDepartId = "";
        data.settleAmoebaSubjectId = "";
        if (this.amoebaDataMap[key].amoebaReceives) {
          const arr = clone(this.amoebaDataMap[key].amoebaReceives);
          data.payDepartId = "";
          arr.push(data);
          this.$set(this.amoebaDataMap[key], "amoebaReceives", arr);
        } else {
          this.$set(this.amoebaDataMap[key], "amoebaReceives", [data]);
        }
      }
    },
    saveOrUpdateAmoebaSettlementCenter() {
      this.$refs["amoebaParams"].validate(valid => {
        if (valid) {
          var param = this.amoebaData;
          var id = this.$route.query.waybillId;
          param["waybillId"] = id;
          console.log(
            "this.Constatvariable.inStockTime :>> ",
            this.Constatvariable.inStockTime
          );
          console.log("this.Constatvariable :>> ", this.Constatvariable);
          param.costDate = this.Constatvariable.inStockTime;
          param.instockTime = this.Constatvariable.disposeTime;

          param.customerId = this.Constatvariable.customerId;
          param.isAborad = 0;
          ajax("saveOrUpdateAmoebaSettlementCenter", param).then(
            res => {
              this.centerDialogVisible = false;
              if (res.code != 200) {
                if (null != res.message) {
                  this.$message.error(m(res.message));
                } else {
                  this.$message.error("修改失败!");
                }
              } else {
                this.lazyloadWaybillReceivePayables();
                this.$message.success("修改成功!");
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      });
    },

    createAmoeba() {
      this.centerDialogVisible = true;
      this.amoebaData.waybillNo = this.Constatvariable["waybillNo"];
      this.amoebaData.settleManId = this.Constatvariable["salesmanId"];

      //每次点击新增后清空除-结算人 以外的数据
      this.amoebaData.count = "";
      this.amoebaData.currencyUnitPrice = "";
      this.amoebaData.currency = "";
      this.amoebaData.costId = "";
      this.amoebaData.amoebaSubjectId = "";
      this.amoebaData.receiveDepartId = "";
      this.amoebaData.costDate = "";
      this.amoebaData.remark = "";
    },
    updateAmoebaLoadPortStatu() {
      var param = {};
      var id = this.$route.query.waybillId;
      param["id"] = id;
      ajax("updateAmoebaLoadPortStatu", param).then(
        res => {
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("修改失败!");
            }
          } else {
            this.$message.success("修改成功!");
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    updateAmoebaDestPortStatu() {
      var param = {};
      var id = this.$route.query.waybillId;
      param["id"] = id;
      ajax("updateAmoebaDestPortStatu", param).then(
        res => {
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("修改失败!");
            }
          } else {
            this.$message.success("修改成功!");
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    handleSelectionChange(val) {
      console.log(
        "%cval: ",
        "color: MidnightBlue; background: Aquamarine;",
        val
      );
      this.selectionList = val;
    },
    payableSelectionChange(val) {
      this.selectionPayableList = val;
    },
    changeReceivable() {
      // TODO 保存操作
      let flag = true;
      for (const i of this.receivableData) {
        flag = this.checkRule(i);
      }
      if (!flag) {
        return;
      }
      ajax("saveWaybillReceiveBaseInfo", this.receivableData).then(
        res => {
          if (res.code == 200) {
            this.$message.success("保存成功!");
            this.isChangeReceivable = false;
          } else {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("系统错误,保存失败!");
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    changePayable() {
      // TODO 保存操作
      let flag = true;
      for (const i of this.payableData) {
        flag = this.checkRule(i);
      }
      if (!flag) {
        return;
      }
      ajax("saveWaybillPayablesBaseInfo", this.payableData).then(
        res => {
          if (res.code == 200) {
            this.$message.success("保存成功!");
            this.isChangePayable = false;
          } else {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("系统错误,保存失败!");
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    querySearchAsync(queryString, cb) {
      console.log(
        "%cqueryString: ",
        "color: MidnightBlue; background: Aquamarine;",
        queryString
      );
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    loadAll() {
      return [{ value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" }];
    },
    addselect(type) {
      if (type === "receivable") {
        this.receivableData = this.addSelectRow(this.receivableData);
      } else {
        this.payableData = this.addSelectRow(this.payableData);
      }
    },

    checkRule(i) {
      if (!i.receiveDepartId) {
        this.$message.error("请填写部门");
        return false;
      } else if (!i.costId) {
        this.$message.error("请填写费用名称");
        return false;
      } else if (!i.count) {
        this.$message.error("请填写数量");
        return false;
      } else if (!i.currency) {
        this.$message.error("请填写币种");
        return false;
      } else if (!i.unitPrice) {
        this.$message.error("请填写单价");
        return false;
      }

      return true;
    },

    changeUnitPrice(val, scope, name) {
      console.log(
        "%cname: ",
        "color: MidnightBlue; background: Aquamarine;",
        name
      );
      console.log(
        "%cscope: ",
        "color: MidnightBlue; background: Aquamarine;",
        scope
      );
      console.log(
        "%cval: ",
        "color: MidnightBlue; background: Aquamarine;",
        val
      );
    },
    lazyloadWaybillReceivePayables() {
      var param = {};
      //直接从缓存获取
      const waybillId = this.$route.query.waybillId;
      param["id"] = waybillId;
      this.fullscreenLoading = true;
      ajax("lazyloadAmoeba", param).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code == 200) {
            this.templateOptions.currencyOptions = res.data["currencyMap"];
            this.templateOptions.configPayNameOptions = res.data["payNames"];
            this.templateOptions.configPayNameAmoebaOptions = res.data["configPayNameAmoebaMap"];
            this.templateOptions.amoebaSubjectOptions =
              res.data["amoebaSubjects"];
            this.templateOptions.userOptions = res.data["users"];
            this.templateOptions.groups = res.data["groups"];
            this.templateOptions.payNameToSubject =
              res.data["payNameToSubject"];
            this.receiveTotalCost = res.data["amoebaTotalReceiveMoney"];
            this.payTotalCost = res.data["amoebaTotalPayMoney"];
            this.profit = res.data["amoebaTotalProfitD"];
            this.amoebaTotalProfit = res.data["amoebaTotalProfit"];
            this.optUser = res.data["optUser"];
            this.amoebaDataMap = res.data["amoebaDataMap"];
            this.activeNames = [];
            if (this.amoebaDataMap) {
              for (var key in this.amoebaDataMap) {
                this.activeNames.push(key);
                if (this.amoebaDataMap[key].amoebaReceives) {
                  this.amoebaDataMap[key].oldData = clone(
                    this.amoebaDataMap[key].amoebaReceives
                  );
                }
              }
              console.log("this.amoebaDataMap :>> ", this.amoebaDataMap);
            }

            this.userOptions = res.data["userMap"];
            this.payNameOptions = res.data["payNameMap"];
            this.currencyOptions = res.data["currencyOptions"];
            this.amoebaSubjectIdOptions = res.data["amoebaSubjectMap"];
            this.receiveDepartIdOptions = res.data["departMap"];
            this.templateOptions.userMap = res.data["userMap"];
            this.templateOptions.payNameMap = res.data["payNameMap"];
            this.templateOptions.currencyMap = res.data["currencyOptions"];
            this.templateOptions.amoebaSubjectMap =
              res.data["amoebaSubjectMap"];
            this.templateOptions.departMap = res.data["departMap"];
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    // 批量推送
    batchToReceivable(list) {
      const params = {
        ids: []
      };
      for (const i of list) {
        if (i.id && i.selectStatus) {
          params.ids.push(i.id);
        }
      }
      if (params.ids.length === 0) {
        this.$message.error("请选择要推送的数据");
        return;
      }

      ajax("synAmoebaSettlementCenterToReceive", params).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code == 200) {
            // TODO 公司名等于当前客户
            this.$message.success("保存成功!");
            // TODO 保存操作 更新数据
            this.$emit("updateToReceive");
          } else {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("系统错误,同步失败!");
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.lazyloadWaybillReceivePayables();
  }
};
</script>

<style lang="scss" scoped>
.border-lr {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
<style>
.handsontable th {
  background: #fff;
  color: #2c3e50;
  text-align: left;
  font-weight: bold;
}

.el-card__body {
  color: #606266;
}
.handsontable th:first-child,
.handsontable th:nth-child(2),
.handsontable td:first-of-type,
.handsontable tr th,
.handsontable tr td,
.handsontable tr:first-child th,
.handsontable tr:first-child td {
  border-color: #ebeef5;
}
</style>
